<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>标签管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <!-- Animate -->
    <link th:href="@{/plugins/animate/animate.css}" rel="stylesheet"/>
    <!-- Jquery -->
    <script th:src="@{/plugins/jquery/jquery-2.1.1.js}"></script>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap/bootstrap.min.css}">
    <!-- Bootstrap -->
    <script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>
    <!-- layer  -->
    <script th:src="@{/plugins/layer/layer.js}"></script>
    <!-- Data picker -->
    <script th:src="@{/plugins/datapicker/bootstrap-datepicker.js}"></script>
    <link th:href="@{/plugins/datapicker/datepicker3.css}" rel="stylesheet">

    <link th:href="@{/module/index/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/font-awesome.css}"> <!--图标-->
    <!-- index -->
    <link th:href="@{/module/index/index.min.css}" rel="stylesheet"/>

    <!--<script th:src="@{/plugins/inspinia/inspinia.js}"></script>-->
    <!-- FooTable -->
    <script th:src="@{/plugins/footable/footable.all.min.js}"></script>
    <link th:href="@{/plugins/footable/footable.core.css}" rel="stylesheet">


    <link th:href="@{/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" rel="stylesheet">
    <!--inputtag 标签-->
    <link th:href="@{/plugins/inputtag/inputtag.css}" rel="stylesheet">
    <script th:src="@{/plugins/inputtag/inputtag.js}"></script>
</head>

<body style="background-color: #f5f5f5">
<div class="padding-md">
    <ul class="breadcrumb">
        <li><span class="primary-font"><i class="icon-home"></i></span><a href="#"> 账单</a></li>
        <li id="navLi2">标签管理</li>
    </ul>
    <form id="form" class="form-horizontal">
        <div class="form-group"><label class="col-sm-1 control-label"> 标签 </label>
            <div id="tag" class="has-warning"><label class="control-label"></label>
                <div class="col-sm-10">
                    <div class="input_box" id="tags">
                        <input type="hidden" name="tagNames" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <div class="form-group"><label class="col-sm-1 control-label"> </label>
            <div class="col-sm-10">
                <button type="button" onclick="save()" class="btn btn-block btn-outline btn-primary"
                        style="color:#1ab394;background-color:transparent;border-color:#1ab394;">添加
                </button>
            </div>
        </div>
    </form>
    <div class="hr-line-dashed"></div>
    <div class="ibox-content">
        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
            <thead>
            <tr>
                <th>权重</th>
                <th data-sort-ignore="true">名字</th>
                <th data-sort-ignore="true">说明</th>
                <th data-sort-ignore="true">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:if="bds != null" th:each="tag, index :${billTags}">
                <td th:text="${tag.weight}"></td>
                <td th:text="${tag.name}"></td>
                <td th:text="${tag.explain}"></td>
                <td>
                    <div class="btn-group">
                        <a data-toggle="modal" href="#update-form" class="btn-white btn btn-xs"
                           th:onclick="'javascript:getBillTagById(\''+ ${tag.id} +'\')'">
                            修改
                        </a>
                        <button class="btn-white btn btn-xs" type="button"
                                th:onclick="'javascript:deleteBillTag(\''+ ${tag.id} +'\')'">
                            删除
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="7">
                    <ul class="pagination pull-right"></ul>
                </td>
            </tr>
            </tfoot>
        </table>
        <!-- 弹出框 -->
        <div class="ibox-content">
            <div id="update-form" class="modal fade" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-sm-12"><h3 class="m-t-none m-b"> 标签修改 </h3>
                                    <p id="tagId"> 标签ID </p>
                                    <div class="form-group"><label>标签名称</label> <input id="tagName" type="name"
                                                                                       placeholder="标签名称"
                                                                                       class="form-control"></div>
                                    <div class="form-group"><label>标签说明</label> <input id="tagExplain" type="explain"
                                                                                       placeholder="标签说明"
                                                                                       class="form-control"></div>
                                    <div class="form-group"><label> 权重 </label> <input id="tagWeight" type="weight"
                                                                                       placeholder="权重"
                                                                                       class="form-control"></div>
                                    <div>
                                        <button th:onclick="'javascript:updateBillTag()'"
                                                class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button">
                                            <strong> 修改 </strong></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        $('.footable').footable();
        $.FreeTags('tags');
    });

    function save() {
        $.ajax({
            type: 'POST',
            url: "/tag/insert",
            dataType: "json",
            data: $("#form").serialize(),
            success: function (data) {
                f5();
            }
        });
    }

    function f5() {
        window.location.href = "/tag/index"
    }

    function updateBillTag() {
        $.ajax({
            type: 'get',
            url: "/tag/update",
            dataType: "json",
            data: {
                "id": $("#tagId").html(),
                "name": $("#tagName").val(),
                "explain": $("#tagExplain").val(),
                "weight": $("#tagWeight").val()
            },
            success: function (data) {
                if (data.code == 200) {
                    f5();
                }
            }
        });
    }

    function getBillTagById(id) {
        $.ajax({
            type: 'get',
            url: "/tag/queryById",
            dataType: "json",
            data: {"id": id},
            success: function (data) {
                if (data.code == 200) {
                    var tag = data.obj.billTag;
                    $("#tagId").html(tag.id);
                    $("#tagName").val(tag.name);
                    $("#tagExplain").val(tag.explain);
                    $("#tagWeight").val(tag.weight);
                }
            }
        });
    }

    function deleteBillTag(id) {
        $.ajax({
            type: 'POST',
            url: "/tag/delete",
            dataType: "json",
            data: {"id": id},
            success: function (data) {
                f5();
            }
        });
    }

    /*]]>*/
</script>
</body>
</html>
